<template>
  <view class="record-list">
    <scroll-view
      scroll-y
      :style="{ height: `calc(100vh - ${getSystemInfo.navBarHeight}px - 44px - 10rpx - 70rpx)` }"
      @scrolltolower="onScrollToLower"
    >
      <order-item
        v-for="item in listData"
        :key="item.id"
        :order-no="item.orderNo"
        :invoice-state="item.invoiceState"
        :order-items="item.orderItemsList"
		:invoice-type="item.invoiceType"
		:id="item.id"
		@click-no="toDetails(item)"
      >
        <view class="order-more" @click="toDetails(item)">
          <view class="om-body">
            <view>
              <view class="dot"></view>
            </view>
            <view class="om-content">
              <text>￥{{ item.invoiceAmount }}</text>
              <view>
                <text v-if="item.invoiceType === 0">电子普通发票</text>
                <text v-if="item.invoiceType === 1">增值税专用发票</text>
                <text>-</text>
                <text>商品明细</text>
                <text>-</text>
                <text v-if="item.titleType === 0">单位</text>
                <text v-if="item.titleType === 1">个人/非企业单位</text>
              </view>
              <text>发票抬头：{{ item.titleName }}</text>
              <text>申请时间：{{ item.applyTime }}</text>
            </view>
          </view>
          <view class="om-footer">
            <u-button
              type="primary"
              size="mini"
              text="查看详情"
              :plain="true"
              :custom-style="{ width: '150rpx', height: '58rpx', fontSize: '28rpx', margin: 0 }">
            </u-button>
          </view>
        </view>
      </order-item>
      <view class="load-more">
        <u-loadmore :status="loadingStatus" :font-size="28" :icon-size="28" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  import orderItem from './orderItem.vue'
  
  export default {
    name: 'record-list',
    components: {
      orderItem
    },
    data() {
      return {
        // 列表请求参数
        listParams: {
          pageNum: 1,
          pageSize: 10
        },
        
        // 加载状态 loadmore-加载前，loading-加载中，nomore-无数据
        loadingStatus: 'loadmore',
        
        // 列表数据
        listData: [],
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
      ...mapState('user', ['userInfo']),
    },
    methods: {
      // 获取申请记录列表
      async getList() {
        if (this.loadingStatus === 'loading') {
          return
        }
        try {
          this.loadingStatus = 'loading'
          const { pageNum, pageSize } = this.listParams
          const userId = this.userInfo.id
          const { datas } = await this.$request({
            url: '/order-center/invoice/apply-detail/list',
            data: { pageNum, pageSize, userId }
          })
          if (pageNum === 1) {
            this.listData = []
            await this.$nextTick()
            this.listData = datas.data
          } else {
            this.listData.push(...datas.data)
          }
          // await this.$nextTick()
          this.loadingStatus = datas.data.length < pageSize ? 'nomore' : 'loadmore'
        } catch (err) {
          this.loadingStatus = 'nomore'
        }
      },
      
      // 跳转详情页
      toDetails(val) {
        uni.navigateTo({
          url: '/minePack/function/invoice/invoiceDetails',
          success: (res) => {
            res.eventChannel.emit('invoiceDetails', {orderId:val.orderId,invoiceId:val.id})
          }
        })
      },
      
      // 重置
      reset() {
        this.listParams.pageNum = 1
        this.loadingStatus = 'loadmore'
        this.getList()
      },
      
      // 滚动到底部
      onScrollToLower() {
        if (this.loadingStatus === 'loadmore') {
          this.listParams.pageNum += 1
          this.getList()
        }
      },
    }
  }
</script>

<style scoped lang="scss">
.record-list {
  .load-more {
    padding: 0 0 15rpx;
  }
  .order-more {
    margin: 0 32rpx;
    padding: 32rpx 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    .om-body {
      background-color: #FFF2F2;
      border: 1px solid #FFDEDE;
      padding: 32rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
      line-height: 2;
      color: rgba(0, 0, 0, 0.45);
      display: flex;
      flex-direction: row;
      gap: 5rpx;
      .dot {
        width: 10rpx;
        height: 10rpx;
        margin: 22rpx 5rpx 0 0;
        border-radius: 5rpx;
        background-color: $uni-primary;
      }
      .om-content {
        display: flex;
        flex-direction: column;
      }
    }
    .om-footer {
      display: flex;
      justify-content: flex-end;
      margin: 32rpx 0 0;
    }
  }
}
</style>
